<template>
  <view class="prop-cards-wrap">
    <!-- 道具卡数量 -->
    <view
      class="show-card-tips cards"
      hover-class="hover-bubble"
      v-if="!showGood"
      @tap="userPropCards({ type: 'show_count' })"
    >
      <view class="text"
        >显示卡 <text>({{ details.show_count }})</text>
      </view>
    </view>
    <!-- 道具卡数量 -->
    <view
      class="tips-card-tips cards"
      hover-class="hover-bubble"
      v-if="!tipsGood"
      @tap="userPropCards({ type: 'hint_count' })"
      ><view class="text"
        >提示卡 <text>({{ details.hint_count }})</text>
      </view></view
    >
    <!-- 使用道具卡 显示奖品 倒计时 -->
    <view
      class="show-goods circle-time"
      v-if="showGood"
      @tap="onOpenGoods('show_count')"
    >
      <u-circle-progress
        class="progress-time"
        active-color="#FFBF4B"
        :percent="showProgress"
        inactive-color="#ffffff"
        bg-color="rgba(255,255,255,0)"
        border-width="12"
        width="156"
      >
      </u-circle-progress>
      <view class="good-content">
        <image
          class="gooo-img"
          :src="goodInfo[active].goods.image"
          mode="widthFix"
        />
      </view>
      <view class="title">下发必出({{ show_time }}s)</view>
    </view>
    <!-- 使用道具卡 提示奖品 倒计时 -->
    <view
      class="tips-goods circle-time"
      v-if="tipsGood"
      @tap="onOpenGoods('hint_count')"
    >
      <u-circle-progress
        class="progress-time"
        active-color="#A97EFF"
        :percent="hintProgress"
        inactive-color="#ffffff"
        bg-color="rgba(255,255,255,0)"
        border-width="12"
        width="156"
      >
      </u-circle-progress>
      <view class="good-content">
        <image
          class="gooo-img"
          :src="goodInfo[active].goods.image"
          mode="widthFix"
        />
      </view>
      <view class="title">下发不出({{ show_time }}s)</view>
    </view>
    <!-- 显示奖品信息 -->
    <view class="mask" @tap="close" v-if="show"></view>
    <view class="card" @tap="close" v-if="show">
      <image class="bg-card" :src="img[active]" />
      <!-- <image class="good-cover" :src="goods.goods.image" mode="widthFix" /> -->
      <image
        class="good-cover"
        :src="goodInfo[active].goods.image"
        mode="widthFix"
      />
      <view class="text-shadow">{{ goodInfo[active].goods.title }}</view>
    </view>
  </view>
</template>
<script>
import show from '../img/show-10.png';
import tips from '../img/tips-10.png';
const t = 60;
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    initiallyId: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      // 道具卡底板
      img: {
        show_count: show,
        hint_count: tips,
      },
      // 道具卡数量
      details: {
        show_count: 0,
        hint_count: 0,
      },
      //显示 提示 道具卡使用后 奖品信息
      goodInfo: {
        show_count: {
          res: '',
          goods: {
            id: '',
            title: '',
            image: '',
          },
        },
        hint_count: {
          res: '',
          goods: {
            id: '',
            title: '',
            image: '',
          },
        },
      },
      // 显示 奖品信息
      active: '',
      // 时间倒计时
      show_time: t,
      hint_time: t,
      // 显示道具卡 定时器
      timer_show: null,
      // 提示道具卡 定时器
      timer_hint: null,

      show: false,
      showGood: false,
      tipsGood: false,
    };
  },
  // 计算属性 适配者模式
  computed: {
    showProgress() {
      return Number(((this.show_time / t) * 100).toFixed(2));
    },
    hintProgress() {
      return Number(((this.hint_time / t) * 100).toFixed(2));
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {
    this.$nextTick(() => {
      this.getData();
    });
  },
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    getData() {
      this.$http('v1.luckybagPropCount', {
        id: this.initiallyId,
      }).then((res) => {
        if (res.code === 1) {
          this.details = res.data;
        }
      });
    },
    // 使用道具卡
    userPropCards(ev) {
      const toast = {
        show_count: {
          text: `显示卡数量不足，是否前往获取？`,
          tips: '确定要使用显示卡吗？',
          id: 'show',
        },
        hint_count: {
          text: `提示卡数量不足，是否前往获取？`,
          tips: '确定要使用提示卡吗？',
          id: 'hint',
        },
      };
      if (this.details[ev.type] == 0) {
        uni.showModal({
          content: toast[ev.type].text,
          showCancel: true,
          cancelText: '取消',
          confirmText: '去获取',
          success: (result) => {
            if (result.confirm) {
            }
          },
          fail: () => {},
          complete: () => {},
        });

        return;
      } else {
        this.active = ev.type;
        uni.showModal({
          content: toast[ev.type].tips,
          showCancel: true,
          cancelText: '取消',
          confirmText: '使用',
          success: (result) => {
            if (result.confirm) {
              this.getCardResult(ev.type);
            }
          },
          fail: () => {},
          complete: () => {},
        });
      }
    },
    // 获取道具卡使用结果
    getCardResult(type) {
      const type_t = {
        show_count: 'show',
        hint_count: 'hint',
      };
      this.$http('v1.luckybagPropUseType', {
        id: this.initiallyId,
        type: type_t[type],
      }).then((res) => {
        if (res.code === 1) {
          this.show = true;
          switch (type) {
            case 'show_count':
              this.showGood = true;
              this.goodInfo.show_count = res.data;
              this.onShowCountdown();
              break;
            case 'hint_count':
              this.tipsGood = true;
              this.goodInfo.hint_count = res.data;
              this.onHintCountdown();
              break;
          }
          this.getData();
        }
      });
    },
    // 倒计时 显示
    onShowCountdown() {
      if (this.timer_show) {
        clearInterval(this.timer_show);
      }
      this.timer_show = setInterval(() => {
        if (this.show_time == 0) {
          clearInterval(this.timer_show);
          this.showGood = false;
          this.show_time = t;
          return;
        }
        this.show_time = this.show_time - 1;
      }, 1000);
    },
    // 倒计时 提示
    onHintCountdown() {
      if (this.timer_hint) {
        clearInterval(this.timer_hint);
      }
      this.timer_hint = setInterval(() => {
        if (this.hint_time == 0) {
          clearInterval(this.timer_hint);
          this.tipsGood = false;
          this.hint_time = t;
          return;
        }
        this.hint_time = this.hint_time - 1;
      }, 1000);
    },
    onOpenGoods(type) {
      switch (type) {
        case 'show_count':
          this.active = 'show_count';
          break;
        case 'hint_count':
          this.active = 'hint_count';
          break;
      }
      this.show = true;
    },
    close() {
      this.show = false;
    },
  },
};
</script>
<style lang="scss" scoped>
view,
image {
  max-width: none;
}
.prop-cards-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10074;
  width: 100%;
  --top: 32vh;

  .cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 0;
    width: 62rpx;
    height: 144rpx;
    border: 2rpx solid #fff;
    border-radius: 30rpx 0 0 30rpx;
    overflow: hidden;

    .text {
      position: relative;
      padding-bottom: 28rpx;
      max-width: 40rpx;
      min-width: 25rpx;
      text-align: center;
      font-size: 25rpx;
      font-weight: 800;
      color: #fff;
      line-height: 30rpx;
      text-shadow: 0 0 4rpx rgba(0, 0, 0, 0.36);
      text {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 70rpx;
      }
    }
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.4) 0px,
          rgba(255, 255, 255, 0.4) 2rpx,
          transparent 2rpx,
          transparent 100rpx
        ),
        linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.4) 0px,
          rgba(255, 255, 255, 0.4) 2rpx,
          transparent 2rpx,
          transparent 100rpx
        );
      background-size: 16rpx 16rpx;
    }
  }
  .show-card-tips {
    top: var(--top);
    background-image: linear-gradient(
      180deg,
      RGBA(240, 165, 67, 1) 50%,
      RGBA(254, 193, 64, 1)
    );
  }
  .tips-card-tips {
    top: calc(var(--top) + 32rpx + 144rpx);
    background-image: linear-gradient(
      180deg,
      RGBA(230, 176, 255, 1) 40%,
      RGBA(178, 148, 255, 1)
    );
  }
  .circle-time {
    position: fixed;
    right: 0;
    width: 156rpx;
    height: 156rpx;
    .progress-time {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    .good-content {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: calc(100% - 12rpx);
      height: calc(100% - 12rpx);
      border-radius: 50%;
      overflow: hidden;

      .gooo-img {
        position: relative;
        top: -10rpx;
        width: 128rpx;
        height: 128rpx;
      }
      &::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.4) 0px,
            rgba(255, 255, 255, 0.4) 2rpx,
            transparent 2rpx,
            transparent 100rpx
          ),
          linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.4) 0px,
            rgba(255, 255, 255, 0.4) 2rpx,
            transparent 2rpx,
            transparent 100rpx
          );
        background-size: 16rpx 16rpx;
      }
    }
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: -10rpx;
      left: 50%;
      z-index: 2;
      transform: translateX(-50%);
      width: 156rpx;
      height: 40rpx;
      background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.5) 51%,
        rgba(0, 0, 0, 0) 100%
      );
      font-size: 20rpx;
      font-weight: bold;
      color: #fff;
    }
  }
  .show-goods {
    top: var(--top);
    .good-content {
      background: linear-gradient(143deg, #f86649 0%, #ffc240 100%);
    }
  }
  .tips-goods {
    top: calc(var(--top) + 32rpx + 144rpx);
    .good-content {
      background: linear-gradient(
        143deg,
        rgba(235, 178, 253, 1) 0%,
        rgba(173, 146, 255, 1) 100%
      );
    }
  }
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100074;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
}
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: calc(50% - 286rpx);
  left: calc(50% - 229rpx);
  z-index: 100075;
  width: 458rpx;
  height: 572rpx;
  .bg-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .good-cover {
    position: relative;
    top: 20rpx;
    z-index: 1;
    width: 350rpx;
    height: 350rpx;
  }
  .text-shadow {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 90rpx;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    min-width: 274rpx;
    height: 58rpx;
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.5) 51%,
      rgba(0, 0, 0, 0) 100%
    );
    font-size: 26rpx;
    font-weight: bold;
    color: #fff;
  }
}
</style>
